<template>
	<el-card shadow="hover" class="card_box">
		<el-form ref="notice_form" :model="notice" :rules="rules" class="notice_form">
			<el-form-item prop="title">
				<el-input placeholder="请输入标题" prefix-icon="el-icon-user-solid" v-model="notice.title">
				</el-input>
			</el-form-item>
			<el-form-item prop="content">
				<mavon-editor v-model="notice.content">
				</mavon-editor>
			</el-form-item>
			
			<el-form-item class="login_btns">
				<el-button type="primary" @click="submitForm('notice_form')">发布</el-button>
				<el-button type="infor" @click="resetForm('notice_form')">重置</el-button>
			</el-form-item>

		</el-form>
	</el-card>
</template>

<script>
	import {
		getUserInfo,
		addNotice
	} from '../../api/system.js'
	export default {
		name: 'Editor',
		data() {
			return {
				notice:{},
				rules:{
					title: [{
							required: true,
							message: '请输入标题',
							trigger: 'blur',
						}
					],
					content: [{
							required: true,
							message: '请输入公告内容',
							trigger: 'blur',
						}
					],
				}
			}
		},
		methods:{
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						addNotice(this.notice).then(res=>{
							if(res.isok){
								this.resetForm('notice_form');
								this.$message("发布成功");
							}
						}).catch(err=>{
							this.$message("保存失败，请重试！");
						})
			
					} else {
						this.$message.error('表单格式不正确');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		},
		created() {
			getUserInfo().then(res => {
				this.notice.name = res.data1.name;
			})
		}
	}
</script>

<style>
	.login_btns {
		text-align: center;
	}
</style>
